<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="avatar-container">
            <el-upload class="avatar-uploader" action="/api/profile/uploadAvatar"
              :headers="{ 'Channel': 'pc', 'Authorization': 'Bearer ' + getToken() }" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <el-avatar v-if="profileForm.avatar" :size="120" :src="params.FileUrl + profileForm.avatar" />
              <el-avatar v-else :size="120" :icon="User" />
            </el-upload>
          </div>
        </el-col>

        <el-col :span="16">
          <el-form :model="profileForm" label-width="100px" class="profile-form">
            <el-form-item label="用户名">
              <el-input v-model="profileForm.username" disabled />
            </el-form-item>

            <el-form-item label="昵称">
              <el-input v-model="profileForm.nickname" />
            </el-form-item>

            <el-form-item label="邮箱">
              <el-input v-model="profileForm.email" />
            </el-form-item>

            <el-form-item label="手机号">
              <el-input v-model="profileForm.phone" />
            </el-form-item>

            <el-form-item label="性别">
              <el-radio-group v-model="profileForm.gender">
                <el-radio :value="1">男</el-radio>
                <el-radio :value="2">女</el-radio>
                <el-radio :value="0">保密</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="个人简介">
              <el-input v-model="profileForm.bio" type="textarea" :rows="4" placeholder="请输入个人简介" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="saveProfile">保存信息</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import { useUser } from '@/store/user'
import type { UploadProps } from 'element-plus'
import { apiUpdateUserInfo } from '@/api/system/user'

const { params, userInfo, setUserInfo } = useUser()

const profileForm = ref({
  username: '',
  nickname: '',
  email: '',
  phone: '',
  gender: 0,
  avatar: '',
  bio: ''
})

// 获取token
const getToken = () => {
  return localStorage.getItem('accessToken') || ''
}


// 保存个人信息
const saveProfile = async () => {
  const res = await apiUpdateUserInfo(profileForm.value)
  if (res.code == 200) {
    ElMessage.success('个人信息更新成功')
    setUserInfo({ ...userInfo, ...profileForm.value })
  } else {
    ElMessage.error(res.message || '更新个人信息失败')
  }
}

// 头像上传成功处理
const handleAvatarSuccess: UploadProps['onSuccess'] = (res) => {
  if (res.code == 200) {
    profileForm.value.avatar = res.data.filePath || ''
    ElMessage.success('头像上传成功')
  } else {
    ElMessage.error(res.message || '头像上传失败')
  }
}

// 头像上传前处理
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('头像图片必须是 JPG 或 PNG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 初始化
onMounted(() => {
  if (userInfo) {
    profileForm.value.username = userInfo.username
    profileForm.value.nickname = userInfo.nickname || ''
    profileForm.value.email = userInfo.email || ''
    profileForm.value.phone = userInfo.phone || ''
    profileForm.value.gender = userInfo.gender || 0
    profileForm.value.avatar = userInfo.avatar || ''
    profileForm.value.bio = userInfo.bio || ''
  }
})
</script>

<style scoped>
.profile-container {
  padding: 0px;
}

.profile-card,
.security-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.change-avatar-btn {
  margin-top: 15px;
}

.profile-form,
.security-form {
  max-width: 600px;
}

.security-card {
  max-width: 600px;
}
</style>